<template>
  <t-dialog v-model:visible="formVisible" :width="623" :footer="false">
    <template #body>
      <!-- 表单内容 -->
      <div id="printJS-form333" style="border: 2px solid; padding: 3px;">
        <h1 style="">房 租 收 据 单</h1>
        <div class="container">
          <div class="box">房间: {{ formData.property_name + '-' + formData.name }}</div>
          <div class="box2">租期：{{ formData.start_time + '至' + formData.end_time }}</div>
          <div class="box">抄表日期：{{ formData.meter_reading_time }}</div>
        </div>
        <table>
          <tr>
            <th>表类</th>
            <th>表度数</th>
            <th>用量</th>
            <th>单价</th>
            <th>金额</th>
          </tr>
          <tr>
            <td>电费</td>
            <td>{{ formData.electricity_meter_this_month + '-' + formData.electricity_meter_last_month }}</td>
            <td>{{ formData.electricity_consumption }}度</td>
            <td>{{ formData.electricity_price }}元/度</td>
            <td>{{ formData.electricity }}元</td>
          </tr>
          <tr>
            <td>水费</td>
            <td>{{ formData.water_meter_this_month + '-' + formData.water_meter_last_month }}</td>
            <td>{{ formData.water_consumption }}吨</td>
            <td>{{ formData.water_price }}元/吨</td>
            <td>{{ formData.water }}元</td>
          </tr>
        </table>
        <div class="container">
          <div class="box">租金：{{ formData.rental }}元</div>
          <div class="box">押金：{{ formData.deposit }}元</div>
          <div class="box">管理费：{{ formData.management }}元</div>
          <div class="box">其他费用：{{ formData.other_charges }}元</div>
        </div>
        <div>合计：{{ formData.total_money }}元</div>
        <div>备注：{{ formData.note }}</div>
      </div>
      <div style="float: right; padding: 8px;">
        <t-button variant="outline" @click="onClickCloseBtn">打印</t-button>
      </div>
    </template>
  </t-dialog>
</template>

<script setup lang="ts">
import type { PropType } from 'vue';
import { ref, watch } from 'vue';
import Print from 'print-js';

// 父给子传值
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  data: Object as PropType<ReceiptData>,
});

export interface ReceiptData {
  id: number;
  property_name: string;
  name: string;
  start_time: string;
  end_time: string;
  electricity_meter_last_month: number;
  water_meter_last_month: number;
  electricity_consumption: number;
  electricity_price: number;
  electricity: number;
  meter_reading_time: string;
  electricity_meter_this_month: number;
  water_meter_this_month: number;
  water_consumption: number;
  water_price: number;
  water: number;
  rental: number;
  deposit: number;
  management: number;
  other_charges: number;
  total_money: number;
  note: string;
}
// 初始化数据
const INITIAL_DATA: ReceiptData = {
  id: 0,
  property_name: '',
  name: '',
  electricity_meter_last_month: undefined,
  water_meter_last_month: undefined,
  meter_reading_time: '',
  electricity_meter_this_month: 0,
  water_meter_this_month: 0,
  rental: 0,
  deposit: 0,
  management: 0,
  other_charges: 0,
  note: '',
  start_time: '',
  end_time: undefined,
  electricity_consumption: 0,
  electricity: 0,
  water_consumption: 0,
  water: 0,
  electricity_price: 0,
  water_price: 0,
  total_money: 0
};
const formVisible = ref(false);
const formData = ref({ ...INITIAL_DATA });

// 打印设置
const onClickCloseBtn = () => {
  // window.print();
  Print({
    printable: 'printJS-form333',
    type: 'html',
    // css: './print.css',
    style: `
            th,td {
              border: 1px solid black;
              padding: 8px;
              text-align: left;
            }
            th {
              background-color: green;
              text-align: center;
              color      : #666;
            }
            h1 {text-align: center;font-size: 17px;}
            table {
              width: 100%;
              border-collapse: collapse;
            }`,
  })
};

// 监视
const emit = defineEmits(['update:visible']);
watch(
  () => formVisible.value,
  (val) => {
    emit('update:visible', val);
  },
);
watch(
  () => props.visible,
  (val) => {
    formVisible.value = val;
  },
);
watch(
  () => props.data,
  (val) => {
    formData.value = val;
  },
);
</script>

<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid black;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
  text-align: center;
}

h1 {
  text-align: center;
  font-size: 17px;
}

.container {
  display: flex;
  width: 100%;
}

.box {
  flex: 2;
  /* border: 1px solid black; */
  /* padding: 20px; */
  box-sizing: border-box;
}

.box2 {
  flex: 3;
  /* border: 1px solid black; */
  /* padding: 20px; */
  box-sizing: border-box;
}
</style>
